<template>
  <div class="padding-all">
    <el-card>
      <div style="padding:20px 30px 30px 30px">
        <el-form ref="ruleForm" label-position="top" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="仓库编码" prop="code" style="width: 85%; ">
                <el-input v-model="ruleForm.code" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库名称" prop="name" style="width: 85%;">
                <el-input v-model="ruleForm.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择" style="width: 85%; ">
                  <el-option
                    v-for="item in optionsType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="省/市/区" prop="region">
              <el-cascader
                v-model="selectedOptions"
                style="width: 56.666%; "
                size="large"
                :options="options"
                @change="handleChange"
              />

            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="详细地址" prop="address" style="width: 85%; ">
                <el-input v-model="ruleForm.address" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库状态" prop="status">
                <el-radio-group v-model="ruleForm.status">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="仓库面积" prop="surface" style="width: 85%; ">
                <div class="area-iton">
                  <el-input v-model="ruleForm.surface" placeholder="请输入" />
                  <span>m³</span>
                </div>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人" prop="personName" style="width: 85%; ">
                <el-input v-model="ruleForm.personName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话" prop="phone" style="width: 85%; ">
                <el-input v-model="ruleForm.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <div class="btnNode">
              <el-button round @click="resetForm('ruleForm')">返回</el-button>
              <el-button round type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </div>

          </el-form-item>
        </el-form>
      </div>

    </el-card>
  </div>
</template>

<script>
import { addCode, addWarehouse } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'Details',
  data() {
    return {
      ruleForm: {
        code: '',
        name: '',
        type: '',
        address: '',
        status: null,
        surface: '',
        personName: '',
        phone: '',
        area: '', // 地区
        city: '', // 市
        province: '', // 省
        location: '' // 链接起来的
      },
      // 省市区选择
      options: regionData,
      selectedOptions: [],

      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        personName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      optionsType: [
        {
          value: 'ZZ',
          label: '中转仓'
        },
        {
          value: 'JG',
          label: '加工仓'
        },
        {
          value: 'CB',
          label: '储备仓'
        },
        {
          value: 'LC',
          label: '冷藏仓'
        }
      ]
    }
  },
  async created() {
    // CK接口
    const res = await addCode()
    console.log(res)
    this.ruleForm.code = res.data
    console.log(this.$route)
    // 如果路由中又id 则进行回显
    if (this.$route.params.id && this.$route.params.id !== 'null') {
      this.showCallback()
    }
  },
  methods: {
    // 回显
    showCallback() {
      console.log(this.$store.state.user.addItem)
      const data = this.$store.state.user.addItem
      // 拿到 vuex中的数据  做数据的回显
      this.ruleForm = {
        code: data.code,
        name: data.name,
        type: data.type,
        address: data.address,
        status: data.status,
        surface: data.surface,
        personName: data.personName,
        phone: data.phone
      }
      this.selectedOptions = [data.province, data.city, data.area]
      console.log(this.selectedOptions)
    },
    handleChange() { //  选择省市区
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]] + '/'
      }
      // alert(loc)
      loc = loc.slice(0, loc.length - 1) // 去除最后一位
      this.ruleForm.location = loc
      console.log(loc)
      console.log(this.selectedOptions)
      this.ruleForm.province = this.selectedOptions[0]
      this.ruleForm.city = this.selectedOptions[1]
      this.ruleForm.area = this.selectedOptions[2]
    },

    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (!valid) return
        try {
          await addWarehouse(this.ruleForm)
          this.$message.success('新增成功')
          // this.$router.push('/manage-base-info/warehouse')
        } catch (error) {
          console.log(error)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        code: '',
        name: '',
        type: '',
        address: '',
        status: '',
        surface: '',
        personName: '',
        phone: '',
        area: '', // 地区
        city: '', // 市
        province: '', // 省
        location: ''
      }
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss' scoped>
.padding-all {
  padding: 20px 30px 30px 30px;
  }
  ::v-deep .el-input__inner {
  background-color: #f8f5f5 !important;
}
.btnNode{
  // height: 66px;
  border-top: 1px solid #f5efee;
  margin-top: 10px;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-content: center;
  button{
    width: 170px;
    height: 40px;
    margin: 0 15px;

  }
}
.area-iton{
  display: flex;
  overflow: hidden;
span{
  transform: translateX(-37px);
  display: block;
  text-align: center;
  color: #5d5d5d;
  height: 40px;
  width: 40px;
  background-color: #e7dfdf;
}
}
::v-deep .el-form-item__label{
   font-size: 14px;
   font-weight: 300;
   color: #887e7e;
}
</style>
